<template>
  <div class="home-container">
    <div class="navigation-bar">
      <navigation-component/>
    </div>
    <div class="carousel-area" style="height: 310px">
      <carousel-component/>
    </div>
    <!-- 新增频道广场部分 -->
    <div class="channel-square">
      <h2 class="channel-title"> ▶ 频道广场 ◀</h2>
      <div class="channel-images">
        <!-- 在vue 中 循序指令是循环 所在标签-->
        <img v-for="(image, index) in GCImages" :key="index" :src="image" :alt="'Channel ' + (index + 1)"
             class="channel-image"/>
      </div>
    </div>
    <!-- 新增猜你喜欢部分 -->
    <div class="guess-you-like">
      <h2 class="guess-title">▶ 猜你喜欢 ◀</h2>
      <div class="product-list">
        <div
            class="product-item"
            v-for="(product, index) in products"
            :key="index"
            @click="goToDetail(product.name)"
        >
          <div class="product-wrapper">
            <img :src="product.image" :alt="product.name" class="product-image"/>
            <p class="product-name" style="font-weight: bold">{{ product.description }}</p>
            <p class="product-price" style="font-size: 22px">¥{{ product.price }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import api from "@/api/index";
import navigationComponent from "@/components/首页组件/navigation.vue";
import carouselComponent from "@/components/首页组件/carousel.vue";
import {useRouter} from "vue-router"; // 引入useRouter

export default {
  name: "Home",
  components: {
    navigationComponent,
    carouselComponent
  },
  data() {
    return {
      products: [],
      GCImages: []
    };
  },
  setup() {
    const router = useRouter(); // 初始化路由实例
    return {router}; // 返回router实例供模板使用
  },
  created() {
    this.initLike();
    this.initGC();
  },
  methods: {

    //频道广场
    initGC() {
      api("/api/getGC").then(res => {
        console.log("asd", res)
        this.GCImages = res.serverData;
      })

    },

    // 猜你喜欢
    initLike() {
      api.get("/api/getLike").then(res => {
        this.products = res.serverData;
        console.log(this.products);
      });
    },


    goToDetail(name) { // 跳转方法
      this.router.push({
        path: "/GoodsDetail",
        query: {name} // 携带name参数
      });
    }
  }
};
</script>

<style scoped>
.home-container {
  display: flex;
  width: 1600px;
  margin: 10px auto 0px;
  background-color: rgb(239, 239, 239);
  border-top: 1px solid #ccc;
  flex-wrap: wrap; /* 添加换行支持 */
}

.navigation-bar {
  width: 400px;
  margin-top: 4px;
  background-color: white;
  display: flex;
  align-items: center;
  height: 100%;
}

.carousel-area {
  flex: 1;

}

/* 新增频道广场样式 */
.channel-square {
  background-color: rgb(239, 239, 239);
  border: 1px solid #ccc;
  width: 100%;
}


.channel-title {
  text-align: center;
  font-size: 24px;
  margin-bottom: 20px;
}

.channel-images {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.channel-images img:last-child {
  margin-right: 0px;
}

.channel-image {

  object-fit: cover;
}

/* 修改猜你喜欢样式 */
.guess-you-like {
  margin-top: 40px;
  background-color: rgb(239, 239, 239);
  width: 100%;
}

.guess-title {
  text-align: center;
  font-size: 24px;
  margin-bottom: 20px;
}

.product-list {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap; /* 添加换行支持 */
}

.product-item {
  width: 370px; /* 设置固定宽度 */
  margin: 10px; /* 添加外边距 */
}

.product-wrapper {
  background-color: #f8f8f8;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;
}

.product-image {
  height: 300px;
  object-fit: cover;
}

.product-name {
  margin: 10px 0;
  font-size: 16px;
  text-align: left; /* 修改为靠左对齐 */
}

.product-price {
  color: red;
  font-weight: bold;
  font-size: 18px;
  text-align: left; /* 修改为靠左对齐 */
}
</style>
